import "./index.less";
import {Fetch} from  '../../libs/';
import {Url, md5Url} from  '../../libs/Url';
import {connect} from 'react-redux';
import {fetch} from  '../../stores/action';
import React from 'react'
import {Scrollbars} from 'react-custom-scrollbars'
import CSS from '../../libs/CSS'
import {parseSearch} from  '../../libs/utils';

import { class_ } from '../../libs/ResManager'
class Class_ extends React.Component {
    constructor(props) {
        super(props);
        this.albumLength = 0;
        this.state = {
            active: 1,
            photo: 1,
            photo_index: 0
        }
    }

    _timer() {
        if(this.albumLength != 0) {
            let photo_index = this.state.photo_index;
            if (photo_index == this.albumLength - 3) {
                this.setState({photo_index: 0});
            } else {
                this.setState({photo_index: photo_index + 1})
            }
        }
    };

    componentDidMount() {
        const {dispatch} = this.props;
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then((res)=> {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        // dispatch(clientInfoSet(clientInfo));
                        dispatch(fetch({
                            url: Url.CLASS,
                            classid: res['class'].classid
                        }));
                        // dispatch(fetch({url: Url.HOME, classid: clientInfo.classid}));
                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }
        this.classTimer = window.setInterval(() => this._timer(), 3000);
    }

    componentWillUnmount() {
        window.clearInterval(this.classTimer);
    }

    _textLimit(str = '', number) {
        if(str.length > number) {
            return str.substring(0, number) + '...';
        }
        return str;
    }

    render() {
        var data = this.props[md5Url.CLASS];
        data = data.teaches ? data : {
            honer: {},
            ['class']: {},
            teaches: [],
            albumPhotos: []
        };
        this.albumLength = data.albumPhotos.length;
        return (
            <div className="class clearfix" style={{}}>
                <div className="panel-item panel1">
                    <div>
                        <div className="profile container-border">
                            <div className="title">
                                {data['class'].name}
                                <span><span>{data['class'].studentNumber}</span>人</span>
                            </div>
                            <table>
                                <tbody>
                                <tr>
                                    <td>班 主 任 :</td>
                                    <td>{data['class'].teacher_user &&
                                    data['class'].teacher_user.name}({
                                        data['class'].teacher_user &&
                                        data['class'].teacher_user.phone
                                    })
                                    </td>
                                </tr>
                                <tr>
                                    <td>班级宣言:</td>
                                    <td>{this._textLimit(data['class'].declaration, 35)}</td>
                                </tr>
                                <tr>
                                    <td>班级简介:</td>
                                    <td>{this._textLimit(data['class'].comment, 80)}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div className="honour container-border">
                            <div style={{height: CSS.pixel(100)}}>
                                <img src={require('./../../imgs/class/class_ry_icon.png')} alt=""
                                     style={{width: CSS.pixel(76), height: CSS.pixel(66)}}/>
                                <ul>
                                    <li>
                                        <span>{data.honer.classHonerNumber}</span>
                                        <br/>
                                        <span>班级荣誉</span>
                                    </li>
                                    <li>
                                        <span>{data.honer.teacherHonerNumber}</span>
                                        <br/>
                                        <span>教师荣誉</span>
                                    </li>
                                    <li>
                                        <span>{data.honer.studentHonerNumber}</span>
                                        <br/>
                                        <span>学生荣誉</span>
                                    </li>
                                </ul>
                            </div>
                            {data && data.honer && data.honer.honers && data.honer.honers.length != 0 ?
                                data.honer.honers.map((item, i) => {
                                    return (
                                        <div className="item" key={i} style = {{paddingTop: i == 1 ? CSS.pixel(10) : null, wordBreak: 'break-all'}}>
                                            <img src={Url.FUN_UPLOAD_PREVIEW(item.fileids)} alt=""
                                                 style={{width: CSS.pixel(90), height: CSS.pixel(60)}} />
                                            <div style = {{wordWrap: 'break-word', wordBreak: 'normal' }}>{this._textLimit(item.name, 30)}</div>
                                        </div>
                                    )
                                })
                                : null
                            }
                        </div>
                    </div>
                    <div className="photos container-border">
                        <div
                            style = {{
                                width: CSS.pixel(60),
                                height: CSS.pixel(343),
                                backgroundImage: CSS.parseBackgroundImage(class_.titleBackground1),
                                backgroundSize: '100% 100%',
                                backgroundRepeat: 'no-repeat',
                                fontSize: '3.5rem',
                                textAlign: 'center',
                                verticalAlign: 'middle',
                                padding: 0,
                                paddingTop: CSS.pixel(60)
                            }}
                        >
                            班级相册
                        </div>
                        <ul>
                            {
                                data.albumPhotos.slice(this.state.photo_index, this.state.photo_index + 3).map((item, index)=> {
                                    return <li key={index}>
                                        <img src={Url.FUN_UPLOAD_PREVIEW(item.photoid)} alt=""/></li>
                                })
                            }
                        </ul>
                    </div>
                </div>
                <div className="panel-item panel2">
                    <a className="title" href="javascript:void(0);"
                       style={{
                           background: 'url(' + require('./../../imgs/home/home_titBg3.png') + ')',
                           width: (4.5 * 326 / 67) + 'rem',
                           backgroundSize: '100% 100%',
                       }}>任课教师</a>
                    <div className="news-board container-border"
                         style={{
                             backgroundSize: '100% 100%',
                             height: (window.innerHeight - 45 - 30 - 40 * 2 - 180 - 120 - 15)
                         }}>
                        <Scrollbars>
                            {
                                data.teaches.map((item, index)=> {
                                    return (
                                        <div key={index} className="item">
                                            {item.teachername.name}
                                            <span>（{item.subject.name}）</span>
                                            <div style = {{height: CSS.pixel(10)}} />
                                            <p>{item.teacher.comment}</p>
                                        </div>
                                    )
                                })
                            }
                        </Scrollbars>
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.CLASS]: state.fetchBySubject[md5Url.CLASS]
    }
};

export default connect(select)(Class_)